<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/font-awesome/css/all.css" rel="stylesheet">
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="resources/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
    <link href="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet"
          type="text/css"/>
    <link href="resources/assets/global/plugins/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" type="text/css"/>
    <link href="resources/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet"
          type="text/css"/>
    <link href="resources/assets/caryr/caryr.commom.css" rel="stylesheet" type="text/css"/>
</head>

<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white page-sidebar-closed">
<th:block th:with="
    ERPConstants = ${T(com.sh.caryr.erp.util.ERPConstants)},
    authTarget = ${ERPConstants.AUTH_TARGET_PROMAPPING},
    layout = ${T(com.sh.caryr.erp.custmz.LayoutContainer).getLayout(authTarget, session.user)},
    readAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_READ},
    createAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_CREATE},
    deleteAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_DELETE},
    updateAuth = ${authTarget + '_' + ERPConstants.AUTH_ACTVT_UPDATE}
">
    <!-- HEADER -->
    <th:block th:replace="fragment/header"/>
    <!-- CONTAINER -->
    <div class="page-container">
        <!-- SIDEBAR -->
        <th:block th:replace="fragment/sidebar"/>

        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- PAGE BAR -->
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li><a href="index.html" class='msg_home'>控制台</a> <i class="fa fa-circle"></i></li>
                        <li><span class='msg_productMapping'>产品对接</span></li>
                    </ul>
                </div>
                <!-- BEGIN ===========page level content============= -->
                <div class="row">
                    <div class="col-md-12">
                        <!--======== Instruction ========-->
                        <div class="alert alert-success alert-dismissable instruction">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>

                            <strong> 产品对接说明: </strong> &nbsp;
                            <span> 将第三方平台上的产品对应到ERP系统的产品</span> <br/>

                            <i class="font-white fas fa-cloud"></i>
                            <span> 点击该按钮，可以将第三方平台上的产品同步到ERP系统.</span> <br/>

                            <i class="font-white fas fa-clone"></i>
                            <span> 选择要生成产品的数据，点击该按钮，自动生成产品到ERP系统.</span> <br/>

                            <i class="font-white fas fa-trash-alt"></i>
                            <span> 选择数据，点击该按钮，删除产品对接.</span> <br/>

                            <i class="font-white fas fa-sync-alt"></i>
                            <span> 点击该按钮，刷新列表.</span> <br/>

                            <i class="font-white fas fa-pencil-alt"></i>
                            <span> 点击该按钮，选择平台产品所对应的产品规格(ERP系统).</span>

                        </div>
                        <!-- Data table-->
                        <div class="portlet box green datatable-portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-list"></i>
                                </div>
                                <div class="tools">
                                    <!--<div class="btn-group" title="产品同步">
                                        <a class="btn green" href="javascript:;" data-toggle="dropdown" aria-expanded="true">
                                            <i class="fas fa-cloud"></i>
                                        </a>
                                        <ul id="btn_batch_update" class="dropdown-menu pull-right" role="menu">
                                        </ul>
                                    </div>-->
                                    <button id="sync_product" class="btn sbold green" title="产品同步">
                                        <i class="fas fa-cloud"></i>
                                    </button>
                                    <button id="btn_import" class="btn sbold green" title="复制产品">
                                        <i class="fas fa-clone"></i>
                                    </button>
                                    <button id="btn_del_entity" class="btn sbold green">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                    <button id="btn_refresh_dt" class="btn sbold green" title="刷新">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover dt-responsive"
                                       width="100%" id="dt_productMapping" cellspacing="0">
                                    <thead>
                                    <tr>
                                        <th width="2%">
                                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                                <input type="checkbox" class="group-checkable" data-set="#dt_productMapping .checkboxes"/>
                                                <span></span>
                                            </label>
                                        </th>
                                        <th width='' class='msg_ent_fld_img'></th>
                                        <th width='' class='msg_productMapping_field_platForm'></th>
                                        <th width='' class='msg_productMapping_field_pfProductId'></th>
                                        <th width='' class='msg_productMapping_field_pfProName'></th>
                                        <th width='' class='font-green msg_ent_fld_dem_name'></th>
                                        <th width="2%"></th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END ===========page level content============= -->
            </div>
        </div>
    </div>

    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="resources/assets/global/scripts/datatable.js"></script>
    <script src="resources/assets/global/plugins/datatables/datatables.min.js"></script>
    <script src="resources/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js"></script>
    <script src="resources/assets/jquery.i18n.properties-min-1.0.9.js"></script>

    <script src="resources/assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js"></script>
    <script src="resources/assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>
    <script src="resources/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>

    <script src="resources/assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
    <script src="resources/assets/global/plugins/jquery-repeater/jquery.repeater.js"></script>
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="resources/assets/jquery.form.js"></script>
    <script src="resources/assets/caryr/caryr.datatable.js"></script>
    <script th:inline="javascript">
        jQuery(document).ready(function () {

            /***************** authori **************/
            /*[+
            caryr.lang = [[${session.lang}]];
            var createAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(createAuth)?'true':'false'}]]);
            var updateAuth = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'true':'false'}]]);
            var disableModify = ('true'==[[${session.isSuperUser||session.authStr.contains(updateAuth)?'false':'true'}]]);
            +]*/
            /************ Get Reference object list***/
            var ProductSpecList;
            function fatchRef() {
                //Load ProdcutSpec list for selection
                caryr.fetchRefList({
                    replace: true,
                    refSelect: [$('.sel_productSpec')],
                    textFormat: '-1',
                    url: 'api/productSpec',
                    callback:function(data){
                        if(data&&data.data){
                            ProductSpecList = {};
                            for(var i =0;i<data.data.length;i++){
                                var proSpec = data.data[i];
                                ProductSpecList[proSpec.id] = proSpec;
                            }
                        }
                    }
                });
            }
            /***************** load company  configuration **************/
            caryr.loadData({
                url: 'api/util/compCfg',
                callback: function (data) {
                    if (data && data.data && data.data.length != 0) {
                        $('#sync_product').removeClass('hidden');
                    } else {
                        $('#sync_product').addClass('hidden');
                    }
                }
            });

            $('#sync_product').on('click', function (e) {
                caryr.confirm({
                    title: "确定要导入数据吗？",
                    onConfirm: function () {
                        caryr.ajaxReq({
                            url: "api/productMapping/sync",
                            type: "POST",
                            successMsgRender: function (response) {
                                var count = response && response.data && response.data.length ? response.data.length : 0;
                                return $.i18n.prop("msg_api_succ_update_count", count);
                            },
                            success: function () {
                                table.draw();
                            }
                        });
                    }
                });
            });
            /***************** dataTable **************/
            var tableId = '#dt_productMapping';
            var table = caryr.dataTable.create({
                url: "api/productMapping",
                defaultOrderBy: 4,
                tableId: tableId,
                lang: caryr.lang,
                pageLength: 25,
                columns: [
                    {
                        data: 'img',
                        orderable: false,
                        render: function (e, n) {
                            return '<img src=' + e + ' class="dt-img">'
                        }
                    },
                    {data: 'platformName', orderable: false},
                    {data: 'extProId', orderable: false},
                    {data: 'extProName', orderable: false},
                    {
                        data: 'productSpecName',
                        orderable: false,
                        render: function (e, n) {
                            if (e == null) {
                                e = '';
                            }
                            var html = '<span name="productSpecName" class="inline_display">' + e + '</span>';
                            html += '<select class="inline_input hidden form-control sel_productSpec" name="productSpecId"></select>';
                            return html;
                        }
                    }
                ],
                enableInlineEdit: true,
                onInlineSave: function (data, e) {
                    var productSpecId = $(e).closest('tr').find('select.inline_input.sel_productSpec').val();
                    data.productSpecId = productSpecId;
                    caryr.ajaxReq({
                        url: "api/productMapping",
                        type: "PUT",
                        data: data,
                        success: function () {
                            if (productSpecId && ProductSpecList){
                                var display = $(e).closest('tr').find('.inline_display[name="productSpecName"]');
                                if (ProductSpecList[productSpecId] && ProductSpecList[productSpecId].name) {
                                    display.html(ProductSpecList[productSpecId].name);
                                } else {
                                    display.html('');
                                }
                            }
                        }
                    });
                },
                draw: function () {
                    fatchRef();
                }
            });
            /***************** import events **************/
            $('#btn_import').on('click', function (e) {
                var ids = caryr.dataTable.selectedIds(table);
                if (!ids) {
                    return;
                }

                var selectData = caryr.dataTable.selectedData(table);
                for (var i = 0; i < selectData.length; i++) {
                    var data = selectData[i];
                    if(data.productSpecId){
                        swal("已设置过产品规格的数据无法生成产品规格，请先重置产品规格 或 取消勾选该数据。", "", "error");
                        return;
                    }
                }

                var url = "api/productMapping/import/" + caryr.ids2UrlParam(ids);
                caryr.confirm({
                    title: "确定要生成产品规格吗吗？",
                    onConfirm: function () {
                        caryr.ajaxReq({
                            url: url,
                            type: "POST",
                            success: function () {
                                table.draw();
                            }
                        });
                    }
                });
            });
        });
    </script>
</th:block>
</body>
</html>